@import (reference) 'src/style/mixins';

.navigation-item {
  &__radio {
    display: none;
  }

  @nav-size: 64px;
  @icon-size-default: 32px;
  @icon-size-active: 48px;
  @icon-offset-default: (@nav-size - @icon-size-default) / 2;
  @icon-offset-active: (@nav-size - @icon-size-active) / 2;

  &__label {
    cursor: pointer;
    display: block;
    font-size: @icon-size-default;
    line-height: 0;
    padding: @icon-offset-default;
    text-align: center;
    width: @nav-size;
    transition: color @animation, font-size @animation, padding @animation;

    .html_light & {
      color: @c-black-4;
    }

    .html_dark & {
      color: @c-white-7;
    }
  }

  &__radio:checked ~ &__label {
    color: @c-primary-4;
    font-size: @icon-size-active;
    padding: @icon-offset-active;
    transition: font-size @animation, padding @animation;
  }
}
